<!DOCTYPE HTML>
<html class="x-admin-sm">
<head>
    <th:block th:insert="head/head :: common_head"></th:block>
    <style>
        #zstp {
            max-width: 100%; /* 限制图片最大宽度为父元素宽度 */
            max-height: 100%; /* 限制图片最大高度为父元素高度 */
            height: auto; /* 保持图片高度按比例缩放 */
            width: auto; /* 保持图片宽度按比例缩放 */
            object-fit: contain; /* 使图片完整显示在容器内，保持比例 */
        }
        #bjtp {
            max-width: 100%; /* 限制图片最大宽度为父元素宽度 */
            max-height: 100%; /* 限制图片最大高度为父元素高度 */
            height: auto; /* 保持图片高度按比例缩放 */
            width: auto; /* 保持图片宽度按比例缩放 */
            object-fit: contain; /* 使图片完整显示在容器内，保持比例 */
        }
        .tp1 {
            max-width: 100%; /* 限制图片最大宽度为父元素宽度 */
            max-height: 100%; /* 限制图片最大高度为父元素高度 */
            height: auto; /* 保持图片高度按比例缩放 */
            width: auto; /* 保持图片宽度按比例缩放 */
            object-fit: contain; /* 使图片完整显示在容器内，保持比例 */
        }
        .tp2 {
            max-width: 100%; /* 限制图片最大宽度为父元素宽度 */
            max-height: 100%; /* 限制图片最大高度为父元素高度 */
            height: auto; /* 保持图片高度按比例缩放 */
            width: auto; /* 保持图片宽度按比例缩放 */
            object-fit: contain; /* 使图片完整显示在容器内，保持比例 */
        }
        .tp3 {
            max-width: 100%; /* 限制图片最大宽度为父元素宽度 */
            max-height: 100%; /* 限制图片最大高度为父元素高度 */
            height: auto; /* 保持图片高度按比例缩放 */
            width: auto; /* 保持图片宽度按比例缩放 */
            object-fit: contain; /* 使图片完整显示在容器内，保持比例 */
        }
        .tp4 {
            max-width: 100%; /* 限制图片最大宽度为父元素宽度 */
            max-height: 100%; /* 限制图片最大高度为父元素高度 */
            height: auto; /* 保持图片高度按比例缩放 */
            width: auto; /* 保持图片宽度按比例缩放 */
            object-fit: contain; /* 使图片完整显示在容器内，保持比例 */
        }
        .tp5 {
            max-width: 100%; /* 限制图片最大宽度为父元素宽度 */
            max-height: 100%; /* 限制图片最大高度为父元素高度 */
            height: auto; /* 保持图片高度按比例缩放 */
            width: auto; /* 保持图片宽度按比例缩放 */
            object-fit: contain; /* 使图片完整显示在容器内，保持比例 */
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card" style="margin: 10px;">
                    <div class="layui-tab layui-tab-brief">
                        <div class="layui-tab-content" >
                            <div class="layui-tab-item layui-show">
                                <form class="layui-form layui-form-pane" autocomplete="off">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>所属项目：
                                        </label>
                                        <div class="layui-input-block">
                                            <select name="xm_id" id="xm_id" lay-search="" lay-filter="xm_id">

                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>活动名称：
                                        </label>
                                        <div class="layui-input-block">
                                            <input type="text" class="layui-input" id="hdmc" name="hdmc" onkeydown="on_key_tab_s('lx_id',event);">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>活动类型：
                                        </label>
                                        <div class="layui-input-block">
                                            <select name="lx_id" id="lx_id" lay-search="" lay-filter="lx_id">

                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>是否首页显示：
                                        </label>
                                        <div class="layui-input-block">
                                            <select name="sfsyxs" id="sfsyxs" lay-search="" lay-filter="sfsyxs">
                                                <option value="1">-是-</option>
                                                <option value="0">-否-</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>顺序号：
                                        </label>
                                        <div class="layui-input-block">
                                            <input type="text" class="layui-input" id="xsxh" name="xsxh" onkeydown="on_key_tab('jg',event);">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>产品单价(元)：
                                        </label>
                                        <div class="layui-input-block">
                                            <input type="text" class="layui-input" id="jg" name="jg" value="10" onkeydown="on_key_tab('yf',event);">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>邮费(元)：
                                        </label>
                                        <div class="layui-input-block">
                                            <input type="text" class="layui-input" id="yf" name="yf" value="0" onkeydown="on_key_tab_s('zdxdsl',event);">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>单笔订单最大数量：
                                        </label>
                                        <div class="layui-input-block">
                                            <input type="text" class="layui-input" id="zdxdsl" name="zdxdsl" value="200" onkeydown="on_key_tab('hdzt',event);">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>活动状态：
                                        </label>
                                        <div class="layui-input-block">
                                            <select name="hdzt" id="hdzt" lay-search="" lay-filter="hdzt">
                                                <option value="1">-正常-</option>
                                                <option value="0">-停止-</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            首页列表展示图片：
                                        </label>
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-normal"  id="uploadFile">选择图片</button>
                                            <span id="filename" ></span>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            制作完成展示页背景图片：
                                        </label>
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-normal"  id="uploadFile1">选择图片</button>
                                            <span id="filename1" ></span>
                                        </div>
                                    </div>
                                    <div id="mxp_div" style="display: none">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                横版相框图片：
                                            </label>
                                            <div class="layui-input-block">
                                                <button type="button" class="layui-btn layui-btn-normal"  id="uploadFile2">选择图片</button>
                                                <span id="filename2" ></span>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                竖版相框图片：
                                            </label>
                                            <div class="layui-input-block">
                                                <button type="button" class="layui-btn layui-btn-normal"  id="uploadFile3">选择图片</button>
                                                <span id="filename3" ></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="gxh_div" style="display: none">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                个性化模版图片：
                                            </label>
                                            <div class="layui-input-block">
                                                <button type="button" class="layui-btn layui-btn-normal"  id="uploadFile6">选择图片</button>
                                                <span id="filename6" ></span>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                定位图：
                                            </label>
                                            <div class="layui-input-block">
                                                <button type="button" class="layui-btn layui-btn-normal"  id="uploadFile5">选择图片</button>
                                                <span id="filename5" ></span>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                个性化相框图片：
                                            </label>
                                            <div class="layui-input-block">
                                                <button type="button" class="layui-btn layui-btn-normal"  id="uploadFile4">选择图片</button>
                                                <span id="filename4" ></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item" id="zs_div" style="display: none">
                                        <label class="layui-form-label">
                                            已上传的首页列表展示图片：
                                        </label>
                                        <div class="layui-input-block" style="height:100px;">
                                            <image class="zstp" src="" id="zstp"></image>
                                        </div>
                                    </div>
                                    <div class="layui-form-item" id="bj_div" style="display: none">
                                        <label class="layui-form-label">
                                            已上传的制作完成展示页背景图片：
                                        </label>
                                        <div class="layui-input-block" style="height:100px;">
                                            <image class="bjtp" src="" id="bjtp"></image>
                                        </div>
                                    </div>
                                    <div id="mxp_div_zs" style="display: none">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                已上传的竖版相框图片：
                                            </label>
                                            <div class="layui-input-block" style="height:100px;">
                                                <image class="tp1" src="" id="sbxktp"></image>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                已上传的横版相框图片：
                                            </label>
                                            <div class="layui-input-block" style="height:100px;">
                                                <image class="tp2" src="" id="hbxktp"></image>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="gxh_div_zs" style="display: none">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                已上传的个性化模版图片：
                                            </label>
                                            <div class="layui-input-block" style="height:100px;">
                                                <image class="tp3" src="" id="gxhbjtp"></image>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                已上传的个性化相框图片：
                                            </label>
                                            <div class="layui-input-block" style="height:100px;">
                                                <image class="tp4" src="" id="gxhxktp"></image>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">
                                                已上传的定位图：
                                            </label>
                                            <div class="layui-input-block" style="height:100px;">
                                                <image class="tp5" src="" id="dwttp"></image>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="layui-form-item">
                                    <button class="layui-btn" lay-submit="" lay-filter="*" id="bc">
                                        新增存盘
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="window.location.href='query'">返回上页</button>
                                </div>
                                <div style="height:100px;"></div>
                            </div>

                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
</div>
<th:block th:insert="head/head :: common_jsfiles"></th:block>
<script>
    /**
     * lx 0 表示新增  1 表示修改 id 为主键
     * 所有增改页面，载入时，都是通过doFirst回调renderForm
     *
     */
    var lx="[[${lx}]]";
    var id="[[${id}]]";
    var url = "[[${serverUrl}]]/stamp/hd/";
    //图片显示
    var url1 = "[[${serverUrl}]]/stamp/tp/";
    var ms="stamp_hd_info";
    $(document).ready(function() {
        if(lx=="1"){
            $("#bc").html("修改存盘");
        }else{
            $("#bc").html("新增存盘")
        }
    });
    function on_result(result)
    {
        $('#bc').removeClass("layui-btn-disabled").attr("disabled",false);
        if (result.code!=500)
        {
            if (result.code==1 || result.code==2 || result.code==0){
                //新增成功
                layer.msg(result.msg, { time: 1000 }, function() {
                    window.location.href='query'
                });//失败时只提示信息，不关闭弹出层且不刷新父页
            } else{
                layer.msg(result.msg);
            }
        }
        else
        {
            layer.msg(result.msg);
        }
    }
    //表单相关
    layui.use(['form'], function(){
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        //文件上传0
        var attachmentArray = [];
        upload.render({
            elem: '#uploadFile', //绑定元素（上传文件的id）
            url: '', //上传接口
            method: 'POST',
            auto: false,
            accept: 'images',//指定允许上传时校验的文件类型
            field:'wj',//设定文件域的字段名
            size: 1024*4,//限制文件大小4M
            choose:function(obj){
                obj.preview(function(index, file, result){
                    attachmentArray = [];
                    attachmentArray.push(file);
                    $("#filename").html(file.name);
                });
            }
        });

        //文件上传1
        var attachmentArray1 = [];
        upload.render({
            elem: '#uploadFile1', //绑定元素（上传文件的id）
            url: '', //上传接口
            method: 'POST',
            auto: false,
            accept: 'images',//指定允许上传时校验的文件类型
            field:'wj',//设定文件域的字段名
            size: 1024*4,//限制文件大小4M
            choose:function(obj){
                obj.preview(function(index, file, result){
                    attachmentArray1 = [];
                    attachmentArray1.push(file);
                    $("#filename1").html(file.name);
                });
            }
        });

        //文件上传2
        var attachmentArray2 = [];
        upload.render({
            elem: '#uploadFile2', //绑定元素（上传文件的id）
            url: '', //上传接口
            method: 'POST',
            auto: false,
            accept: 'images',//指定允许上传时校验的文件类型
            field:'wj',//设定文件域的字段名
            size: 1024*4,//限制文件大小4M
            choose:function(obj){
                obj.preview(function(index, file, result){
                    attachmentArray2 = [];
                    attachmentArray2.push(file);
                    $("#filename2").html(file.name);
                });
            }
        });

        //文件上传3
        var attachmentArray3 = [];
        upload.render({
            elem: '#uploadFile3', //绑定元素（上传文件的id）
            url: '', //上传接口
            method: 'POST',
            auto: false,
            accept: 'images',//指定允许上传时校验的文件类型
            field:'wj',//设定文件域的字段名
            size: 1024*4,//限制文件大小4M
            choose:function(obj){
                obj.preview(function(index, file, result){
                    attachmentArray3 = [];
                    attachmentArray3.push(file);
                    $("#filename3").html(file.name);
                });
            }
        });

        //文件上传4
        var attachmentArray4 = [];
        upload.render({
            elem: '#uploadFile4', //绑定元素（上传文件的id）
            url: '', //上传接口
            method: 'POST',
            auto: false,
            accept: 'images',//指定允许上传时校验的文件类型
            field:'wj',//设定文件域的字段名
            size: 1024*4,//限制文件大小4M
            choose:function(obj){
                obj.preview(function(index, file, result){
                    attachmentArray4 = [];
                    attachmentArray4.push(file);
                    $("#filename4").html(file.name);
                });
            }
        });

        //文件上传5
        var attachmentArray5 = [];
        upload.render({
            elem: '#uploadFile5', //绑定元素（上传文件的id）
            url: '', //上传接口
            method: 'POST',
            auto: false,
            accept: 'images',//指定允许上传时校验的文件类型
            field:'wj',//设定文件域的字段名
            size: 1024*4,//限制文件大小4M
            choose:function(obj){
                obj.preview(function(index, file, result){
                    attachmentArray5 = [];
                    attachmentArray5.push(file);
                    $("#filename5").html(file.name);
                });
            }
        });

        //文件上传6
        var attachmentArray6 = [];
        upload.render({
            elem: '#uploadFile6', //绑定元素（上传文件的id）
            url: '', //上传接口
            method: 'POST',
            auto: false,
            accept: 'images',//指定允许上传时校验的文件类型
            field:'wj',//设定文件域的字段名
            size: 1024*4,//限制文件大小4M
            choose:function(obj){
                obj.preview(function(index, file, result){
                    attachmentArray6 = [];
                    attachmentArray6.push(file);
                    $("#filename6").html(file.name);
                });
            }
        });

        //渲染表格参数
        var renderForm = function (formData){
            console.info("formData:"+JSON.stringify(formData));
            var options = '<option value="">请选择所属项目</option>';
            //父项目
            formData.stampXmList.forEach(function(item) {
                options += '<option value="' + item.urlId + '">' + item.name + '</option>';
            });
            $('select[id="xm_id"]').html(options);

            options ='';
            options = '<option value="">请选择活动类型</option>';
            //父项目
            formData.stampHdLxList.forEach(function(item) {
                options += '<option value="' + item.id + '">' + item.name + '</option>';
            });
            $('select[id="lx_id"]').html(options);

            if (lx==1){
                $("#hdmc").val(formData.stampHd.name);
                $("#lx_id").val(formData.stampHd.lxId);
                $("#xm_id").val(formData.stampHd.urlXmId);
                $("#zstp").attr("src",url1+"hdzs?id="+formData.stampHd.urlId);
                $("#bjtp").attr("src",url1+"hdbj?id="+formData.stampHd.urlId);
                $("#zs_div").show();
                $("#bj_div").show();
                $("#jg").val(formData.stampHd.jg);
                $("#zdxdsl").val(formData.stampHd.zdxdsl);
                $("#yf").val(formData.stampHd.yf);
                $("#sfsyxs").val(formData.stampHd.sfsyxs);
                $("#xsxh").val(formData.stampHd.xsxh);
                $("#hdzt").val(formData.stampHd.state);
                if (formData.stampHd.lxId=="1"){
                    //隐藏个性化的配置
                    $("#gxh_div").hide();
                    $("#gxh_div_zs").hide();
                    $("#mxp_div_zs").show();
                    $("#mxp_div").show();
                    $("#hbxktp").attr("src",url1+"hbxk?id="+formData.stampHd.urlId);
                    $("#sbxktp").attr("src",url1+"sbxk?id="+formData.stampHd.urlId);
                }else if (formData.stampHd.lxId=="2"){
                    //隐藏明信片相关的配置
                    $("#gxh_div").show();
                    $("#gxh_div_zs").show();
                    $("#gxhbjtp").attr("src",url1+"gxhmb?id="+formData.stampHd.urlId);
                    $("#gxhxktp").attr("src",url1+"gxhxk?id="+formData.stampHd.urlId);
                    $("#dwttp").attr("src",url1+"dwt?id="+formData.stampHd.urlId);
                    $("#mxp_div_zs").hide();
                    $("#mxp_div").hide();
                }
            }
            form.render(); // 重新渲染
            if (lx=="0") init_select('xm_id');
        }
        function doFirst()
        {
            //发送的请求
            var jsonData = {
                id: id,
                lx: lx,
                timestamp:new Date().getTime()
            };
            var sendStr = {
                data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
            };
            post_json_form(url+"info",JSON.stringify(sendStr),"数据加载中...",renderForm);
        }

        function onSave(nonce_zhi){
            //获取提交令牌
            if (is_null(nonce_zhi)){
                $('#bc').removeClass("layui-btn-disabled").attr("disabled",false);
                layer.msg("没有获取到操作凭证！请重试！",{icon:2,anim:6});
                return false;
            }
            var jsonData = {
                xm_id: $("#xm_id").val(),
                lx_id: $("#lx_id").val(),
                hdmc: $("#hdmc").val(),
                sfsyxs: $("#sfsyxs").val(),
                xsxh: $("#xsxh").val(),
                jg: $("#jg").val(),
                yf: $("#yf").val(),
                hdzt: $("#hdzt").val(),
                zdxdsl: $("#zdxdsl").val(),
                lx: lx,
                id: id,
                nonce_ms:ms,
                nonce_zhi:nonce_zhi,
                timestamp:new Date().getTime()
            };
            var sendStr = {
                data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
            };
            var uploadData = new FormData();
            for (var i = 0; i < attachmentArray.length; i++) {
                uploadData.append("wj", attachmentArray[i]);
            }
            for (var i = 0; i < attachmentArray1.length; i++) {
                uploadData.append("wj1", attachmentArray1[i]);
            }
            for (var i = 0; i < attachmentArray2.length; i++) {
                uploadData.append("wj2", attachmentArray2[i]);
            }
            for (var i = 0; i < attachmentArray3.length; i++) {
                uploadData.append("wj3", attachmentArray3[i]);
            }
            for (var i = 0; i < attachmentArray4.length; i++) {
                uploadData.append("wj4", attachmentArray4[i]);
            }
            for (var i = 0; i < attachmentArray5.length; i++) {
                uploadData.append("wj5", attachmentArray5[i]);
            }
            for (var i = 0; i < attachmentArray6.length; i++) {
                uploadData.append("wj6", attachmentArray6[i]);
            }
            uploadData.append('data',encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b")));
            post_data_file_token(url+"save_6files",uploadData,"数据提交中...");
        }

        //特殊select的焦点事件
        form.on('select(xm_id)', function (data) {
            init('hdmc');
        });
        form.on('select(lx_id)', function (data) {
            if (data.value=="1"){
                //隐藏个性化的配置
                $("#gxh_div").hide();
                $("#gxh_div_zs").hide();
                $("#mxp_div_zs").show();
                $("#mxp_div").show();
            }else if (data.value=="2"){
                //隐藏明信片相关的配置
                $("#gxh_div").show();
                $("#gxh_div_zs").show();
                $("#mxp_div_zs").hide();
                $("#mxp_div").hide();
            }
            init_select('sfsyxs')
        });
        form.on('select(sfsyxs)', function (data) {
            init('xsxh');
        });

        //监听提交
        form.on('submit(*)', function(data){
            if ($("#xm_id").val()==""){
                layer.msg("请选择所属项目！",{icon:2,anim:6});
                return false;
            }
            if ($("#hdmc").val()==""){
                layer.msg("请输入活动名称！",{icon:2,anim:6});
                return false;
            }
            if ($("#lx_id").val()==""){
                layer.msg("请选择活动类型！",{icon:2,anim:6});
                return false;
            }
            if (!confirm("是否确定提交存盘？")) return false;
            $('#bc').addClass("layui-btn-disabled").attr("disabled",true);
            psot_get_nonce(ms,"[[${serverUrl}]]/getnonce",onSave)
            return false;
        });

        doFirst();
    });

</script>
</body>
</html>